<template>
<view>
<!-- 头像昵称区域 -->
<view class="top-box">
      <image :src="userHomeVo.simpleUserVo.avatar" class="avatar"></image>
      <view class="nameAndFollow">
        <view class="top-name">
          <view class="userName">{{ userHomeVo.simpleUserVo.userName }}</view>
        </view>
        <view class="follow-fans">
        <view class="follow-count">{{ userHomeVo.followAndFansCount.followCount }}&nbsp;关注</view>
        <view class="fans-count">{{ userHomeVo.followAndFansCount.fansCount }}&nbsp;粉丝</view>
      </view>
      </view>
	  <view class="two-button">
	  	<button
	  	  v-if="showFollowButton"
	  	  class="follow-btn"
	  	  :class="{ followed: isFollowed }"
	  	  @click="followUser"
	  	>
	  	  {{ isFollowed ? "已关注" : "关注" }}
	  	</button>
		<button class="send-message" @click="sendMessage">发消息</button>
	  </view>
      
</view>
<view class="content">
        <!-- 组团信息列表显示区域 -->
        <view v-if="userHomeVo.groupList.length > 0">
          <view
            v-for="(group, groupIndex) in userHomeVo.groupList"
            :key="groupIndex"
            class="group-item"
            @click="getGroupDetail(group.tuanId)"
          >
            <view class="second-box">
              <image :src="userHomeVo.simpleUserVo.avatar" class="group-avatar"></image>
              <view class="second-a">
                <view class="group_name">{{ userHomeVo.simpleUserVo.userName }}</view>
                <view class="send_time">{{ group.sendTime }}</view>
              </view>
            </view>
            <text class="tuan-title">
              {{
                group.expanded
                  ? group.tuanTitle
                  : group.tuanTitle.slice(0, 20) +
                    (group.tuanTitle.length > 20 ? "..." : "")
              }}
            </text>
            <br>

            <text class="tuan-detail">
              {{
                group.expanded
                  ? group.tuanDetail
                  : group.tuanDetail.slice(0, 80) +
                    (group.tuanDetail.length > 80 ? "..." : "")
              }}
            </text>
            <text v-if="group.tuanDetail.length > 80" class="toggle-btn"
              >详情</text
            >
            <!-- 添加 threeImages 显示 -->
            <view class="three-images">
              <image
                v-for="(image, imgIndex) in group.threeImages"
                :key="imgIndex"
                :src="image"
                class="theImage"
              ></image>
            </view>
          </view>
        </view>
        <view v-else class="no-content"> 暂无内容~ </view>
      </view>
</view>
</template>

<script>
export default {
  
  data() {
    return {
      userId: uni.getStorageSync("userId"),
      theUserId: "",
	  theUserName: "",
      userHomeVo: {
        simpleUserVo: {},
        followAndFansCount: {
          followCount: 0,
          fansCount: 0
        },
        groupList: [],
      },
      isFollowed: "", // 关注状态
    }
  },
 
  onLoad(options) {
    this.theUserId = options.theUserId;
    this.getUserHome();
    console.log("是否关注：", this.isFollowed);
  },
  computed: {
    showFollowButton() {
      return this.theUserId !== uni.getStorageSync("userId");
    },
  },
  methods: {
	  //发消息
	  sendMessage(){
		  uni.navigateTo({
		    url: `/subpkg/private_chat/private_chat?theUserId=${this.theUserId}&theUserName=${this.theUserName}`,
		  });
	  },
    followUser() {
      this.isFollowed = !this.isFollowed; // 切换关注状态
      const followDto = {
        userId: this.userId,
        followedUserId: this.theUserId,
        isFollowed: this.isFollowed,
      };
      console.log("发送关注请求:", {
        userId: this.userId,
        followedUserId: this.theUserId,
        isFollowed: this.isFollowed,
      });
      uni.$http
        .post("/follow/followUser", followDto)
        .then((res) => {
          const responseData = res.data;
          if (responseData.code === 200) {
            if (this.isFollowed) {
              console.log("已关注");
              // 这里可以添加关注用户的逻辑
              uni.showToast({
                title: "关注成功~",
                icon: "none",
                duration: 2000,
              });
            } else {
              console.log("取消关注");
              // 这里可以添加取消关注的逻辑
              uni.showToast({
                title: "已取消关注",
                icon: "none",
                duration: 2000,
              });
            }
          }
        })
        .catch((err) => {
          console.error("关注/取消关注失败", err);
        });
    },
     // 获取组团信息列表
     getUserHome() {
      console.log("--------theUserId:", this.theUserId);
      uni.$http
        .get(`/userHome/getUserHome?theUserId=${this.theUserId}&userId=${this.userId}`) // 将选中的标签作为参数传递
        .then((res) => {
          console.log("用户主页获取组团信息", res.data);
          // 解析服务器返回的 JSON 数据
          const responseData = res.data;
          if (responseData.code === 200) {
            this.userHomeVo = responseData.data;
            this.userHomeVo.groupList = responseData.data.groupList.map((group) => ({
              ...group,
              expanded: false, // 默认不展开
            }));
            this.isFollowed = responseData.data.isFollowed;
            console.log("获取用户主页信息成功:", responseData.data);
			this.theUserName = this.userHomeVo.simpleUserVo.userName;
          }else{
            console.log("用户主页获取组团信息失败:", responseData.message);
          }
        })
        .catch((err) => {
          console.error("用户主页获取组团信息失败:", err);
        });
    },
    
      // 获取组团详情
    getGroupDetail(tuanId) {
      uni.navigateTo({
        url: `/subpkg/group_detail/group_detail?tuanId=${tuanId}`,
      });
    },
  }
}

</script>

<style lang="scss">
.top-box {
      height: 300rpx;

      display: flex;
      align-items: center;
      padding-left: 20px;
      background-image: url('https://child-start.oss-cn-shenzhen.aliyuncs.com/background1.png');
      /* 波纹背景图路径 */
      background-size: cover;
      background-repeat: repeat-x;
      position: relative;
      animation: waveAnimation 60s linear infinite;

      @keyframes waveAnimation {
        0% {
          background-position-x: 0;
        }

        100% {
          background-position-x: 3000px;
          /* 波纹移动的距离 */
        }
      }



      .avatar {
        display: block;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 1px 5px black;
      }

      .top-name {
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        padding-left: 30rpx;

        .userName {
          color: #383838;
          font-weight: bold;
          font-size: 17px;
          width: 50vw;
        }
      }

}

.follow-fans {
    display: flex;
    font-size: 14px;
    padding-left: 31rpx;
    padding-top: 10px;

    .follow-count {
      margin-right: 40px;
    }
    
  }

.group-item {
  background-color: white;
  padding: 2vw;
  margin-bottom: 1.8vw;
  margin-left: 1.8vw;
  margin-right: 1.8vw;
  border-radius: 13px;

  .second-box {
    margin-top: 1px;
    height: 44px;
    width: 205px;
    display: flex;
    position: relative;
  }

  .group-avatar {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  .second-a {
    display: flex;
    flex-direction: column;
    padding-left: 10px;

    .group_name {
      color: #1d1c1c;
      font-size: 13px;
      max-width: 130px; /* 设置最大宽度 */
      white-space: nowrap; /* 防止换行 */
      overflow: hidden; /* 隐藏溢出内容 */
      text-overflow: ellipsis; /* 省略号显示 */
    }

    .send_time {
      color: #6a6666;
      font-size: 11px;
      margin-top: 2px;
    }
  }
}

.tuan-title {
  font-weight: bold;
}

.tuanDetail {
  display: flex;
}

.toggle-btn {
  color: #1983f4;
  font-size: 16px;
  cursor: pointer;
  margin-top: 5px;
}

//  添加 threeImages 样式
.three-images {
  display: flex;
  margin-top: 10px;
}

.theImage {
  width: 29vw;
  height: 29vw;
  margin-right: 1vw;
  border-radius: 10px;
}
.content {
    padding: 10px 0;
}
.no-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 170px;
}

.follow-btn {
    margin-top: 8px;
    height: 30px;
    font-size: 12px;
    background-color: #fbd269;
    color: white;
    border: none;
    border-radius: 20px;
    text-align: center;

    &.followed {
      background-color: #ccc;
      color: #666;
    }
}
  .send-message {
  	margin-top: 7px;
  	height: 30px;
  	font-size: 12px;
  	background-color: #fbd269;
  	color: white;
  	border: none;
  	border-radius: 20px;
  	text-align: center;
  }
</style>